<template>
  <div class="container">
    <div class="top-info">
      <div class="school-name">
        <img src="@/assets/image/patrol/home/lineV.png">
        <span>{{ schoolName }}</span>
      </div>
      <el-row :gutter="32" style="margin-top: 10px; margin-bottom: 10px">
        <el-col :xs="12" :sm="12" :lg="8">
          <div class="guard-card-panel" @click="toGuardList">
            <div class="img2">
              <img src="@/assets/image/patrol/home/guard2.png"/>
            </div>
            <div class="img3">
              <img src="@/assets/image/patrol/home/guard3.png"/>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">
                安保人员数量
              </div>
              <div class="card-panel-value">
                {{ guardCount }}
              </div>
              <div class="img4">
                <img src="@/assets/image/patrol/home/guard4.png"/>
              </div>
            </div>
          </div>
          <div class="staff-card-panel" @click="toStaffList">
            <div class="img2">
              <img src="@/assets/image/patrol/home/staff2.png"/>
            </div>
            <div class="img3">
              <img src="@/assets/image/patrol/home/staff3.png"/>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">
                行政人员数量
              </div>
              <div class="card-panel-value">
                {{ staffCount }}
              </div>
              <div class="img4">
                <img src="@/assets/image/patrol/home/staff4.jpg"/>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="8">
          <el-calendar v-model="date" @click.native="hintCalendar"></el-calendar>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="8">
          <div class="arrange-top">
            <span style="color: rgba(0, 0, 0, 1);font-size: 18px;font-weight: bold">安全巡查工作排班</span>
            <img src="@/assets/image/patrol/home/finish.png">
            <span style="color: rgba(0, 0, 0, 1);font-size: 10px;">已完成 </span>
            <span style="font-size: 25px; font-weight: bold">{{ lineFinishDayCount }}</span>
            <span style="color: rgba(0, 0, 0, 1);font-size: 10px;"> 天</span>
          </div>
          <div class="arrange-tab">
            <el-link @click.native="hintGuardTab"
                     :class="[isActiveTab == 'guard' ? 'tabHintClass' : 'tabNotHintClass']">安保人员排班
            </el-link>
            <el-link @click.native="hintStaffTab"
                     :class="[isActiveTab == 'staff' ? 'tabHintClass' : 'tabNotHintClass']">行政人员排班
            </el-link>
          </div>
          <div class="arrange-swiper">
            <swiper :options="swiperOption" ref="mySwiper" style="height: 100%">
              <swiper-slide class="arrange-detail" v-for="item in currentLineGuards" :key="item.id"
                            v-if="isActiveTab == 'guard'">
                <div>当日排班情况</div>
<!--                <div>安全巡检人员：{{ item.guard.guardName }}</div>-->
                <div>安全巡检组：{{ item.group.groupName }}</div>
                <!-- <div>当日排班情况：{{ item.createTime.substring(0, 10) }}</div> -->
                <div>当日排班情况：{{ item.params.startTime.substring(11, 16) }} - {{
                    item.params.finishTime.substring(11, 16)
                  }}
                </div>
                <div>安全巡查线路：{{ item.line.lineName }}</div>
              </swiper-slide>
              <div v-if="isActiveTab == 'guard' && currentLineGuards.length === 0"
                   style="margin: 0 auto;line-height: 170px;font-weight: bold;">当日无排班情况
              </div>
              <div v-if="isActiveTab == 'staff' && currentLineStaffs.length === 0"
                   style="margin: 0 auto;line-height: 170px;font-weight: bold;">当日无排班情况
              </div>
              <swiper-slide class="arrange-detail" v-for="item in this.currentLineStaffs" :key="item.id"
                            v-if="isActiveTab == 'staff'">
                <div>当日排班情况</div>
<!--                <div>安全巡检人员：{{ item.staff.staffName }}</div>-->
                <div>安全巡检组：{{ item.group.groupName }}</div>
                <!-- <div>当日排班情况：{{ item.createTime.substring(0, 10) }}</div> -->
                <div>当日排班情况：{{ item.params.startTime.substring(11, 16) }} - {{
                    item.params.finishTime.substring(11, 16)
                  }}
                </div>
                <div>安全巡查线路：{{ item.line.lineName }}</div>
              </swiper-slide>
              <div class="swiper-pagination" slot="pagination"></div>
              <div class="swiper-button-prev" slot="button-prev"></div>
              <div class="swiper-button-next" slot="button-next"></div>
            </swiper>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="wrapper">
          <div class="title">
            <img src="@/assets/image/patrol/home/lineV.png">
            <span>待办事项</span>
          </div>
          <div class="list"
               v-if="lineNoDos.length > 0 || fillInNofills.length > 0 || dailyformdata==0 ||reportingList.length>0">
            <el-scrollbar style="height:100%;">
              <!--              <template v-for="item in guardNoSubmits">-->
              <!--                <div class="list-row">-->
              <!--                  <div class="things-img"><img src="@/assets/image/patrol/home/things.png"></div>-->
              <!--                  <div class="things-title">-->
              <!--                    <el-link @click.native="toGuardSubmitList(item.guardPhonenumber)">安保人员{{ item.guardName }}资料未提交</el-link>-->
              <!--                  </div>-->
              <!--                  <div class="things-time">{{ item.createTime }}</div>-->
              <!--                </div>-->
              <!--                <div style="clear: both"></div>-->
              <!--              </template>-->
              <template v-for="item in lineNoDos">
                <div class="list-row">
                  <div class="things-img"><img src="@/assets/image/patrol/home/things.png"></div>
                  <div class="things-title">
                    <el-link @click.native="toLineRecordList(item)">{{ item.lineName }}[{{
                        item.memberName
                      }}]未提交安全巡查记录
                    </el-link>
                  </div>
                  <div class="things-time">{{ item.createTime }}</div>
                </div>
                <div style="clear: both"></div>
              </template>
              <template v-for="item in fillInNofills">
                <div class="list-row">
                  <div class="things-img"><img src="@/assets/image/patrol/home/things.png"></div>
                  <div class="things-title">
                    <el-link @click.native="toFillInList(item)">{{ item.formName }}未提交</el-link>
                  </div>
                  <div class="things-time">{{ item.createTime }}</div>
                </div>
                <div style="clear: both"></div>
              </template>
              <template v-for="item in reportingList">
                <div class="list-row">
                  <div class="things-img"><img src="@/assets/image/patrol/home/things.png"></div>
                  <div class="things-title">
                    <el-link @click.native="toReporting()">
                      {{ parseTime(item.findtime, '{y}-{m}-{d}') + "发现的"}}
                      <template v-for="dict in safetyHazardLevelOptions">
                        <template v-if="item.safetyHazardLevel == dict.dictValue"><span>{{ dict.dictLabel }}</span></template>
                      </template>安全隐患未处理
                    </el-link>
                  </div>
                  <div class="things-time">{{ item.createTime }}</div>
                </div>
                <div style="clear: both"></div>
              </template>
              <div class="list-row" v-if="dailyformdata==0">
                <div class="things-img"><img src="@/assets/image/patrol/home/things.png"></div>
                <div class="things-title">
                  <el-link @click.native="todailyform()">每日校园安全检查、整改记录表未提交</el-link>
                </div>
                <div class="things-time">{{ parseTime(Date()) }}</div>
              </div>
              <div style="clear: both"></div>
            </el-scrollbar>
          </div>
          <div v-else
               style="text-align: center;line-height: 200px;color: rgba(0, 0, 0, 0.45);">
            暂无数据
          </div>

        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="notice">
          <div class="notice-title">
            <img src="@/assets/image/patrol/home/lineV.png">
            <span>通知公告</span>
          </div>
          <div class="notice-list" v-if="notifications.length > 0">
            <el-scrollbar style="height:100%;">
              <el-row style="margin-top: 10px;margin-right: 20px;" v-for="item in notifications" :key="item.id">
                <el-col :span="4" v-if="item.readStatus == 2">
                  <img src="@/assets/image/patrol/home/finish.png"
                       style="vertical-align: middle;margin-right: 5px;width: 5px;">
                  <span style="font-size: 12px">已回复</span>
                </el-col>
                <el-col :span="4" v-if="item.readStatus == 1">
                  <img src="@/assets/image/patrol/home/finish.png"
                       style="vertical-align: middle;margin-right: 5px;width: 5px;">
                  <span style="font-size: 12px">已读</span>
                </el-col>
                <el-col :span="4" v-if="item.readStatus == 0">
                  <img src="@/assets/image/patrol/home/notfinish.png"
                       style="vertical-align: middle;margin-right: 5px;width: 5px;">
                  <span style="font-size: 12px">未读</span>
                </el-col>
                <el-col :span="12" align="left">
                  <span style="font-size: 12px"><el-link @click.native="toNotificationDetail(item)">{{
                      item.title
                    }}</el-link></span>
                </el-col>
                <el-col :span="8" align="right">
                  <span style="color: rgba(0, 0, 0, 0.45); font-size: 12px;">{{
                      parseTime(item.publishTime, '{y}-{m}-{d}')
                    }}</span>
                </el-col>
              </el-row>
            </el-scrollbar>
          </div>
          <div v-if="notifications.length <= 0"
               style="text-align: center;line-height: 200px;color: rgba(0, 0, 0, 0.45);">
            暂无数据
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {swiper, swiperSlide} from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import {getGuardCount, listGuardNoSubmit} from "@/api/patrol/guard";
import {getStaffCount} from "@/api/patrol/staff";
import {listLineGuardNoPage} from "@/api/patrol/line_guard";
import {listNotifinationNoPage_by_user_id} from "@/api/patrol/notifination_user";
import {parseTime, selectDictLabel} from "@/utils/ruoyi";
import {getSchoolName} from "@/api/patrol/school";
import {getLineFinishDayCount} from "@/api/patrol/line_record_detail";
import {listLineStaffNoPage} from "@/api/patrol/line_staff";
import {listUndoneSchedule} from "@/api/patrol/statistics";
import {singlistNoPage} from "@/api/patrol/form";
import {getDailyformInt} from "@/api/patrol/daily";
import {listReporting} from "@/api/patrol/reporting";

export default {
  name: 'Index',
  data() {
    return {
      date: new Date(),
      swiperOption: {
        loop: true,
        loopAdditionalSlides: 3,
        pagination: {
          el: '.swiper-pagination',    //与slot="pagination"处 class 一致
          clickable: true,            //轮播按钮支持点击
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },
      guardCount: 0,
      staffCount: 0,
      guardNoSubmits: [],
      lineNoDos: [],
      fillInNofills: [],
      notifications: [],
      isActiveTab: 'guard',
      lineGuards: [],
      lineStaffs: [],
      currentLineGuards: [],
      currentLineStaffs: [],
      safetyHazardLevelOptions: [],
      reportingList: [],
      lineFinishDayCount: 0,
      schoolName: "",
      dailyformdata: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        statetype: 0,
      }
    };
  },
  created() {
    this.getSchoolName();
    this.getGuardCount();
    this.getStaffCount();
    this.getGuardNoSubmit();
    this.getUndoList();
    this.getNotificationNoPage();
    this.getLineGuards();
    this.getLineStaffs();
    this.getLineFinishDayCount();
    this.getFillInNofills();
    this.getDailyformInt();
    this.getList(),
      this.getSafetyHazardLevelOptions()
  },

  components: {
    swiper,
    swiperSlide
  },
  methods: {
    getList() {
      this.loading = true;
      listReporting(this.queryParams).then(response => {
        this.reportingList = response.rows;
        console.log(this.reportingList)
      });
    },
    hintGuardTab() {
      this.isActiveTab = 'guard';
      this.hintCalendar();
    },
    hintStaffTab() {
      this.isActiveTab = 'staff';
      this.hintCalendar();
    },
    hintCalendar() {
      console.log(111)
      let currentDateStr = parseTime(this.date, '{y}-{m}-{d}');
      this.currentLineGuards = [];
      this.currentLineStaffs = [];
      console.log(this.lineGuards)
      this.lineGuards.forEach(lineGaurd => {
        if (lineGaurd.date.substring(0, 10) === currentDateStr) {
          this.currentLineGuards.push(lineGaurd);
        }
      });
      this.lineStaffs.forEach(lineStaff => {
        if (lineStaff.date.substring(0, 10) === currentDateStr) {
          this.currentLineStaffs.push(lineStaff);
        }
      });
    },
    getGuardCount() {
      getGuardCount().then(response => {
        this.guardCount = response.guardCount;
      });
    },
    getStaffCount() {
      getStaffCount().then(response => {
        this.staffCount = response.staffCount;
      });
    },
    getFillInNofills() {
      singlistNoPage().then(rows => {
        this.fillInNofills = rows;
        console.log(this.fillInNofills);
      });
    },
    getDailyformInt() {
      getDailyformInt().then(rows => {
        this.dailyformdata = rows;
      });
    },
    getUndoList() {
      listUndoneSchedule().then(rows => {
        this.lineNoDos = rows;
      });
    },
    getGuardNoSubmit() {
      listGuardNoSubmit().then(rows => {
        this.guardNoSubmits = rows;
      });
    },
    getNotificationNoPage() {
      listNotifinationNoPage_by_user_id().then(rows => {
        this.notifications = rows;
      });
    },
    getLineGuards() {
      listLineGuardNoPage().then(rows => {
        this.lineGuards = rows;
        this.hintCalendar();
      });
    },
    getLineStaffs() {
      listLineStaffNoPage().then(rows => {
        this.lineStaffs = rows;
        this.hintCalendar();
      });
    },
    getSchoolName() {
      getSchoolName().then(res => {
        this.schoolName = res.schoolName;
      });
    },
    getLineFinishDayCount() {
      getLineFinishDayCount().then(res => {
        this.lineFinishDayCount = res;
      });
    },
    toGuardSubmitList(guardPhonenumber) {
      this.$tab.openPage("安保人员管理", "/basic/guard", {
        isOuter: true,
        guardPhonenumber: guardPhonenumber
      });
    }, todailyform() {
      this.$router.push({
        path: '/form/daily/5',
      })
    }, toReporting() {
      this.$router.push({
        path: '/patrol/reporting',
      })
    },
    toLineRecordList(item) {
      if (item.type === 'guard') {
        // this.$tab.openPage("巡查记录", "/patrol/line_record", {
        //   isOuter: true,
        //   scheduleDate: item.scheduleDate,
        //   lineId: item.lineId
        // });
        this.$router.push({
          path: '/patrol/detail',
          query: {
            scheduleId: item.scheduleId,
            lineName: item.lineName,
            schoolName: item.schoolName,
            memberName: item.memberName
          },
        })
      } else {
        // this.$tab.openPage("巡查记录", "/patrol/record_staff", {
        //   isOuter: true,
        //   scheduleDate: item.scheduleDate,
        //   lineId: item.lineId
        // });
        this.$router.push({
          path: '/patrol/record/staff',
          query: {
            scheduleId: item.scheduleId,
            lineName: item.lineName,
            schoolName: item.schoolName,
            memberName: item.memberName
          },
        })
      }
    },
    toNotificationDetail(item) {
      // this.$tab.openPage("通知公告", "/notify/schoolNotify", {
      //   isOuter: true,
      //   title: title
      // });
      this.$router.push({
        name: 'SchoolNotifyDetail',
        query: {
          notify: encodeURI(JSON.stringify(item))
        }
      });
    }, formatTitle(date, school, level) {
      date = date.split(" ")[0].split("-");
      if (date[1] - '0' < 10) {
        date[1] = date[1] - '0';
      }
      if (date[2] - '0' < 10) {
        date[2] = date[2] - '0';
      }
      date = date[0] + "年" + date[1] + "月" + date[2] + "日";
      level = selectDictLabel(this.safetyHazardLevelOptions, level)
      return date + school + level + "安全隐患报告";
    }, /** 获取安全隐患级别列表 */
    getSafetyHazardLevelOptions() {
      this.loading = true;
      this.getDicts("safety_hazard_level").then(response => {
        this.safetyHazardLevelOptions = response.data;
      });
    },
    toGuardList() {
      this.$tab.openPage("安保人员", "/basic/guard");
    },
    toStaffList() {
      this.$tab.openPage("行政人员", "/basic/staff");
    },
    toFillInList(item) {
      this.$router.push({path: "/form/see/fillin", query: {formdataid: item.id, source: true}});
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 10px;
  background-color: rgb(240, 242, 245);
  min-height: calc(100vh - 35px);

  .top-info {
    background-color: white;
    padding: 16px;
    margin-bottom: 10px;

    .school-name {
      span {
        font-weight: bold;
        font-size: 18px;
      }

      img {
        height: 18px;
        vertical-align: bottom;
        margin-right: 10px;
      }
    }

    .arrange-top {
      margin-bottom: 10px;

      img {
        width: 5px;
        vertical-align: middle;
        margin-left: 20px;
        margin-right: 10px;
      }
    }

    .arrange-tab {
      .tabHintClass {
        width: 120px;
        height: 30px;
        text-align: center;
        color: #FFFFFF;
        background-color: #1E8BFC;
      }

      .tabNotHintClass {
        width: 120px;
        height: 30px;
        text-align: center;
        color: #1E8BFC;
        background-color: #FFFFFF;
        border: 1px solid #1E8BFC;
      }
    }

    .arrange-swiper {
      background: #e3edf6;
      height: 174px;

      .arrange-detail {
        margin-top: 20px;

        div:nth-child(1) {
          color: rgba(0, 0, 0, 1);
          font-weight: bold;
          margin-bottom: 15px;
          margin-left: 50px;
        }

        div:nth-child(2) {
          color: rgba(0, 0, 0, 0.45);
          font-size: 13px;
          margin-bottom: 10px;
          margin-left: 50px;
        }

        div:nth-child(3) {
          color: rgba(0, 0, 0, 0.45);
          font-size: 13px;
          margin-bottom: 10px;
          margin-left: 50px;
        }

        div:nth-child(4) {
          color: rgba(0, 0, 0, 0.45);
          font-size: 13px;
          margin-bottom: 10px;
          margin-left: 50px;
        }
      }
    }


    .guard-card-panel {
      height: 108px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      color: #666;
      background: no-repeat center/100% url("../../../../assets/image/patrol/home/guard1.png");
      margin-bottom: 20px;
      border-radius: 10px;

      .img2 {
        position: absolute;
        padding: 20px;

        img {
          width: 70px;
          height: 70px;
        }
      }

      .img3 {
        position: absolute;
        padding: 28px;
      }

      .card-panel-description {
        float: left;
        font-weight: bold;
        margin-top: 30px;
        margin-left: 110px;

        .card-panel-text {
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          margin-bottom: 5px;
        }

        .img4 {
          position: absolute;
          right: 10px;
          bottom: 0px;

          img {
            width: 50px;
            height: 50px;
          }

        }

        .card-panel-value {
          color: black;
          font-size: 25px;
        }
      }
    }

    .staff-card-panel {
      height: 108px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      color: #666;
      border-radius: 10px;
      background: no-repeat center/100% url("../../../../assets/image/patrol/home/staff1.jpg");

      .img2 {
        position: absolute;
        padding: 20px;

        img {
          width: 70px;
          height: 70px;
        }
      }

      .img3 {
        position: absolute;
        padding: 28px;
      }

      .card-panel-description {
        float: left;
        font-weight: bold;
        margin-top: 30px;
        margin-left: 110px;

        .card-panel-text {
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          margin-bottom: 5px;
        }

        .img4 {
          position: absolute;
          right: 10px;
          bottom: 0px;

          img {
            width: 50px;
            height: 50px;
          }

        }

        .card-panel-value {
          color: black;
          font-size: 25px;
        }
      }
    }
  }


  .notice {
    height: 350px;
    background: #fff;
    padding: 16px 50px 16px 16px;
    margin-bottom: 32px;

    .notice-title {
      margin-bottom: 20px;

      span {
        font-weight: bold;
        font-size: 18px;
      }

      img {
        height: 18px;
        vertical-align: bottom;
        margin-right: 10px;
      }
    }

    .notice-list {
      height: 200px;
    }
  }

  .wrapper {
    background: #fff;
    padding: 16px 16px 16px;
    margin-bottom: 10px;
    height: 350px;

    .title {
      margin-bottom: 20px;

      span {
        font-weight: bold;
        font-size: 18px;
      }

      img {
        height: 18px;
        vertical-align: bottom;
        margin-right: 10px;
      }
    }


    .line-title {
      height: 50px;
      line-height: 50px;
      background: #4080EB;
      border-radius: 5px 5px 0px 0px;
      color: white;

      img {
        width: 30px;
        vertical-align: middle;
        margin-right: 10px;
        margin-left: 20px;
      }
    }

    .line-detail {
      height: 150px;
      line-height: 40px;
      background: #E4F1FF;
      border-radius: 10px;

      .line-finish {
        margin-left: 80px;
        padding-top: 20px;
      }

      .line-notfinish {
        margin-left: 80px;
      }

      img {
        vertical-align: middle;
        margin-right: 10px;
      }
    }

    .exception-title {
      height: 50px;
      line-height: 50px;
      background: #00BA92;
      border-radius: 5px 5px 0px 0px;
      color: white;

      img {
        width: 30px;
        vertical-align: middle;
        margin-right: 10px;
        margin-left: 20px;
      }
    }

    .exception-detail {
      height: 150px;
      line-height: 40px;
      background: #DCFFF0;
      border-radius: 10px;

      .exception-finish {
        margin-left: 80px;
        padding-top: 20px;
      }

      .exception-notfinish {
        margin-left: 80px;
      }

      img {
        vertical-align: middle;
        margin-right: 10px;
      }
    }

    .list {
      height: 200px;
      margin-top: 20px;

      .list-row {
        margin-top: 10px;
        margin-right: 20px;

        .things-img {
          float: left;

          img {
            height: 20px;
          }
        }

        .things-title {
          float: left;
          margin-left: 10px;
          font-size: 12px;
          height: 20px;
          line-height: 20px;
        }

        .things-time {
          float: right;
          font-size: 12px;
          color: rgba(0, 0, 0, 0.45);
          line-height: 20px;
        }
      }
    }
  }
}

</style>
